<template>
  <WsmTable
    ref="table"
    v-model="queryFormType"
    load-url="/dbms-server/base/servers/page"
    :convert="convert"
    :change-load="true"
  >
    <template #title>{{ t('dbms.servers.title') }}</template>
    <template #query="{ data }">
      <el-form-item label="IP">
        <el-input v-model="data.ip.value" />
      </el-form-item>
      <el-form-item :label="t('dbms.servers.serverName')">
        <el-input v-model="data.serverName.value" />
      </el-form-item>
      <el-form-item :label="t('dbms.servers.state')">
        <el-radio-group v-model="data.serverState.value">
          <el-radio value="">{{ t('dbms.servers.all') }}</el-radio>
          <el-radio value="0">{{ t('dbms.servers.error') }}</el-radio>
          <el-radio value="1">{{ t('dbms.servers.normal') }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </template>
    <template #button="{ row }">
      <el-button type="primary" v-hasPermi="'add'" @click="addForm.show()">{{
        t('common.add')
      }}</el-button>
      <el-button v-hasPermi="'update'" v-if="row" @click="update(row.ip)" type="primary">{{
        t('common.update')
      }}</el-button>
      <el-button v-hasPermi="'delete'" v-if="row" @click="del(row.ip)" type="danger">{{
        t('common.delete')
      }}</el-button>
      <el-button
        v-if="row && row.serverState == 1"
        v-hasPermi="'deploy'"
        type="primary"
        @click="addMicroservice(row.ip)"
        >{{ t('dbms.microservices.addApp') }}
      </el-button>
    </template>
    <template #column>
      <el-table-column type="expand">
        <template #default="props">
          <div m="4">
            <p class="b-2 m-l-10">{{ t('dbms.servers.serverPath') }}: {{ props.row.serverPath }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="serverState" :label="t('dbms.servers.state')" width="70">
        <template #default="scope">
          <template v-if="scope.row.serverState === 0">
            <el-tag effect="dark" type="danger">{{ t('dbms.servers.error') }}</el-tag>
          </template>
          <template v-else-if="scope.row.serverState === 1">
            <el-tag effect="dark" type="success">{{ t('dbms.servers.normal') }}</el-tag>
          </template>
          <template v-else>
            <el-tag effect="dark" type="info">{{ t('dbms.servers.unknown') }}</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="ip" label="IP" width="180" />
      <el-table-column prop="serverName" :label="t('dbms.servers.serverName')" />
      <el-table-column prop="adminAccount" :label="t('dbms.servers.adminAccount')" />
      <el-table-column :label="t('dbms.servers.appServers')" width="90" align="center">
        <template #default="scope">
          {{ scope.row.notStart + scope.row.starting + scope.row.runing }}
        </template>
      </el-table-column>
      <el-table-column
        prop="notStart"
        :label="t('dbms.servers.notStart')"
        width="80"
        align="center"
      >
        <template #default="scope">
          <el-tag effect="light" type="info">{{ scope.row.notStart }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="starting"
        :label="t('dbms.servers.starting')"
        width="80"
        align="center"
      >
        <template #default="scope">
          <el-tag effect="light" type="warning">{{ scope.row.starting }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="runing" :label="t('dbms.servers.running')" width="80" align="center">
        <template #default="scope">
          <el-tag effect="light" type="success">{{ scope.row.runing }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="checkTime" :label="t('dbms.servers.checkTime')" width="170" />
    </template>
  </WsmTable>
  <WsmForm
    ref="addForm"
    v-model="addData"
    submit-url="/dbms-server/base/servers/add"
    label-width="100px"
    :init-data="initData"
    :title="t('dbms.servers.addTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-row>
        <el-col :span="8">
          <el-form-item prop="ip" :label="t('dbms.servers.ip')">
            <el-input v-model="form.ip" :placeholder="t('dbms.servers.ip')" />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item prop="serverName" :label="t('dbms.servers.serverName')">
            <el-input v-model="form.serverName" :placeholder="t('dbms.servers.serverName')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item prop="adminAccount" :label="t('dbms.servers.adminAccount')">
            <el-input v-model="form.adminAccount" :placeholder="t('dbms.servers.adminAccount')" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="adminPassword" :label="t('dbms.servers.adminPassword')">
            <el-input
              type="password"
              v-model="form.adminPassword"
              :placeholder="t('dbms.servers.adminPassword')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="port" :label="t('dbms.servers.port')">
            <el-input v-model="form.port" :placeholder="t('dbms.servers.port')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="serverPath" :label="t('dbms.servers.serverPath')">
            <el-input v-model="form.serverPath" :placeholder="t('dbms.servers.serverPath')" />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>

  <WsmForm
    ref="updateForm"
    v-model="updateData"
    load-url="/dbms-server/base/servers/get"
    submit-url="/dbms-server/base/servers/update"
    label-width="100px"
    :title="t('dbms.servers.updateTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-row>
        <el-col :span="8">
          <el-form-item prop="ip" :label="t('dbms.servers.ip')">
            <el-input v-model="form.ip" :placeholder="t('dbms.servers.ip')" />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item prop="serverName" :label="t('dbms.servers.serverName')">
            <el-input v-model="form.serverName" :placeholder="t('dbms.servers.serverName')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item prop="adminAccount" :label="t('dbms.servers.adminAccount')">
            <el-input v-model="form.adminAccount" :placeholder="t('dbms.servers.adminAccount')" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="adminPassword" :label="t('dbms.servers.adminPassword')">
            <el-input
              type="password"
              v-model="form.adminPassword"
              :placeholder="t('dbms.servers.adminPassword')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="port" :label="t('dbms.servers.port')">
            <el-input v-model="form.port" :placeholder="t('dbms.servers.port')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="serverPath" :label="t('dbms.servers.serverPath')">
            <el-input v-model="form.serverPath" :placeholder="t('dbms.servers.serverPath')" />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>

  <WsmForm
    ref="deployForm"
    v-model="addDeployData"
    submit-url="/dbms-server/base/appserver/addApp"
    :width="600"
    :init-data="initDeployData"
    label-width="100px"
    :title="t('dbms.microservices.deployTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-form-item prop="appName" :label="t('dbms.microservices.appName')">
        <el-select v-model="form.appName" :placeholder="t('dbms.microservices.appName')">
          <el-option
            v-for="item in microservices"
            :key="item.appName"
            :label="item.appNote"
            :value="item.appName"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="port" :label="t('dbms.microservices.port')">
        <el-input v-model="form.port" :placeholder="t('dbms.microservices.port')" />
      </el-form-item>
    </template>
  </WsmForm>
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { WsmForm } from '@/components/WsmForm'
import { ConvertType, QueryFormType, QueryType } from '@/components/WsmTable/src/types'
import { delApi } from '@/api/dbms/server'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { FormDataType } from '@/components/WsmForm/src/types'
import { listApi } from '@/api/dbms/microservices'

const { t } = useI18n()

//表格对象
const table = ref()

//新增表单对象
const addForm = ref()
const initData = ref({
  port: 22
})
const addData: FormDataType = {
  ip: '',
  port: 22,
  serverName: '',
  adminAccount: '',
  adminPassword: '',
  serverPath: ''
}

//修改表单对象
const updateForm = ref()
const updateData: FormDataType = {
  ip: '',
  port: 22,
  serverName: '',
  adminAccount: '',
  adminPassword: '',
  serverPath: ''
}

const queryFormType: QueryFormType = {
  ip: {
    value: '',
    queryType: QueryType.LIKE
  },
  serverName: {
    value: '',
    queryType: QueryType.LIKE
  },
  serverState: {
    value: '',
    queryType: QueryType.EQ
  }
}

const convert = ref<ConvertType>({
  dateFormat: [
    {
      name: 'checkTime',
      format: 'yyyy-MM-dd HH:mm:ss'
    }
  ]
})

const update = (ip: string) => {
  updateForm.value.show({ ip })
}
const del = async (ip: string) => {
  ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await delApi(ip)
    if (rs.success) {
      table.value.load(1)
    }
  })
}

const microservices = ref()
const loadMicroservices = async () => {
  const rs = await listApi()
  if (rs.success) {
    microservices.value = rs.data
  }
}
loadMicroservices()

const deployForm = ref()

const initDeployData = ref({
  ip: '',
  appName: '',
  port: 0
})
const addDeployData: FormDataType = {
  ip: '',
  appName: '',
  port: 0
}

const addMicroservice = (ip: string) => {
  initDeployData.value.ip = ip
  deployForm.value.show()
}

const flushed = () => {
  table.value.load(1)
}
</script>

<style scoped></style>
